<template>
	<div class="app-table">
		<div class="label" v-if="props.routerParams.operateType !== 'view'">
			<span style="color: red" v-if="props.routerParams.operateType === 'add'">*</span>评审应用
		</div>
		<div class="table">
			<el-button
				v-if="props.routerParams.operateType === 'add'"
				:disabled="!props.appCategory"
				class="button"
				type="primary"
				@click="visible = true"
				icon="Plus"
				>选择评审应用</el-button
			>
			<el-table
				:cell-style="{ textAlign: 'center' }"
				:header-cell-style="{ textAlign: 'center', background: 'var(--el-table-row-hover-bg-color)', color: 'var(--el-text-color-primary)' }"
				border
				:data="tableData"
				style="width: 100%"
			>
				<el-table-column prop="appName" label="数字化应用名称" />
				<el-table-column prop="belongField" label="所属领域" width="180" />
				<el-table-column prop="responsibleDept" label="责任部门" width="180" />
				<el-table-column prop="countyLeadDept" label="市级牵头部门" width="180" />
				<el-table-column prop="designUnit" label="设计单位" width="180" />
				<el-table-column prop="yearBudget" label="年度预算（万元）" width="180" />
				<el-table-column fixed="right" label="操作" width="180" v-if="props.routerParams.operateType === 'add'">
					<template #default="{ row }">
						<el-button text type="danger" icon="Delete" @click="handleDelete(row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
	<ChooseApp :selectValues="tableData" @close="getData" :appCategory="props.appCategory" :visible="visible" />
</template>

<script lang="ts" setup>
import ChooseApp from '../ChooseApp/index.vue';
const props = defineProps({
	appCategory: {
		default: '',
		type: String,
	},
	routerParams: {
		type: Object,
		default: () => {
			return {};
		},
	},
});
//监听appCategory变化，应用类别改变，清空tableData
watch(
	() => props.appCategory,
	() => {
		tableData.value = [];
	}
);
const tableData = ref([]);
const visible = ref(false);
//获取数据
const getData = (data: any) => {
	if (data) {
		tableData.value = data;
	}
	visible.value = false;
};
//删除数据
const handleDelete = (row: any) => {
	tableData.value = tableData.value.filter((item: any) => item !== row);
};
defineExpose({
	tableData,
});
</script>
<style scoped lang="scss">
.app-table {
	width: 100%;
	display: flex;
	justify-content: flex-start;

	.label {
		width: 120px;
		text-align: right;
		padding-right: 10px;
	}
	.table {
		width: calc(100% - 140px);
		.button {
			margin-bottom: 20px;
		}
	}
}
</style>
